
#article-container
  .tabs
    position: relative
    margin: 0 0 1rem
    border-right: 1px solid var(--tab-border-color)
    border-bottom: 1px solid var(--tab-border-color)
    border-left: 1px solid var(--tab-border-color)

    > .nav-tabs
      display: flex
      flex-wrap: wrap
      margin: 0
      padding: 0
      background: var(--tab-botton-bg)

      > .tab
        margin: 0
        padding: 0
        list-style: none

        +maxWidth768()
          flex-grow: 1

        button
          display: block
          padding: .5rem 1rem
          width: 100%
          border-top: 2px solid var(--tab-border-color)
          background: var(--tab-botton-bg)
          color: var(--tab-botton-color)
          line-height: 2
          transition: all .4s

          i
            width: 1.5em

        &.active
          button
            border-top: 2px solid $tab-active-border-color
            background: var(--tab-button-active-bg)
            cursor: default

        &:not(.active)
          button
            &:hover
              border-top: 2px solid var(--tab-button-hover-bg)
              background: var(--tab-button-hover-bg)

    > .tab-contents
      .tab-item-content
        position: relative
        display: none
        padding: 1.8rem 1.2rem

        +maxWidth768()
          padding: 1.2rem .7rem

        &.active
          display: block
          animation: tabshow .5s

    .tab-to-top
      position: relative
      display: block
      margin: 0 0 0 auto
      color: $tab-to-top-color

@keyframes tabshow
  0%
    transform: translateY(15px)

  100%
    transform: translateY(0)
